<script>
    import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from "svelte"
    let photos = [];
    onMount(async () => {
        const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
		photos = await res.json();
    })

    let seconds = 0;
	const interval = setInterval(() => seconds += 1, 1000);
    onDestroy(() => clearInterval(interval));
    
    /**
     * 检测的是所有的数据  只要有变动都会触发
     */
    beforeUpdate(() => {
        // console.log(photos);
    })
    afterUpdate(() => {
        // console.log(photos);
    })

    

</script>

<h1>页面销毁的时候清除定时器</h1>
<p>
	The page has been open for
	{seconds} {seconds === 1 ? 'second' : 'seconds'}
</p>

<hr />
<h1>Photo album</h1>

<div class="photos">
	{#each photos as photo}
		<figure>
			<img src={photo.thumbnailUrl} alt={photo.title}>
			<figcaption>{photo.title}</figcaption>
		</figure>
	{:else}
		<!-- this block renders when photos.length === 0 -->
		<p>loading...</p>
	{/each}
</div>

<style>
	.photos {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 8px;
	}

	figure, img {
		width: 100%;
		margin: 0;
	}
</style>